<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("utf8");
%>
<script type="text/javascript">
var data;
var tab = 'talk';
function getTalk(){
	try{
		//alert(1);
		var url = "/Goomi/Ajax.template?class=goomi.talk.talkService&method=getTalk&para=" + "talk_main" ;
		$.getJSON(url, 
			function(json){
				data = json;
				loadGrid();
		});
	}catch(e){
		alert(e);
	}
}

function getSubTalk(id){
	try{
		var url = "/Goomi/Ajax.template?class=goomi.talk.talkService&method=getSubTalk&para=" + id ;
		$.getJSON(url, 
			function(json){
				$(json).each(function(i,item){
					$('#detail').append("<hr/>");
					//$('#detail').append(item.content);
		  			$('#detail').append(item.title + "<br>");
		  			$('#detail').append("作者:" + item.member_id + "<br>");
		  			$('#detail').append("時間:" + item.create_date + "<br>回應:<br>");
		  			$('#detail').append(item.content);
				});
		});
	}catch(e){
		alert(e);
	}
}

//id name description kind_id create_date line_flag fire_flag cust_flag
var lastSelect = "9999";
function loadGrid(){
    jQuery("#talkDataGrid").jqGrid({
      datatype: "local",
      height: 500,
      width: 500,
      colNames:['db_id','主題'],
      colModel:[
		//{name:'id',index:'id', width:60, sorttype:"int",hidden:false},
        {name:'db_id',index:'db_id', width:60, sorttype:"int",editable:true,hidden:true},
        {name:'title',index:'title', width:500, sorttype:"int",editable:true}
        
      ],
      rowNum:10,
     	rowList:[10,20,30],
      //multiselect: true,
      onSelectRow: function(id){
  		if(id && id !== lastSelect){
  			$('#postDiv').hide();
  			$('#detail').html(data[id-1].title + "<br>");
  			$('#detail').append("作者:" + data[id-1].member_id + "<br>");
  			$('#detail').append("時間:" + data[id-1].create_date + "<br><hr>");
  			$('#detail').append('<pre>' + data[id-1].content + '</pre>');
  			$('#detail').append('<br><button id=reply>回應</button>');
  			
  			$('#reply').button().click(function (){
  				<% if ( session.getAttribute("id") != null){ %>
  				$('#postForm').each(function(){
  			        this.reset();
  				});
  				$('#parent_id').val(data[id-1].db_id);
  				$('#type').val("talk_detail");
  				$('#title').val("Re:" + data[id-1].title);
  				$('#postDiv').show();
  				<% } else { %>
  				$( "#login-form" ).dialog( "open" );
  				<% } %>
  			});
  			
  			getSubTalk(data[id-1].db_id);
  			lastSelect=id;
  		}
  	},
	gridComplete: function(){
		var ids = jQuery("#dataGrid").jqGrid('getDataIDs');
		for(var i=0;i < ids.length;i++){
			var cl = ids[i];
			//up = "<input style='height:22px;width:20px;' type='button' value='U' onclick=\"uploadPic('" + jQuery("#dataGrid").getLocalRow(cl).db_id + "');\"  />"; 
			img = "<img width=50 height=50 id='img" + jQuery("#dataGrid").getLocalRow(cl).db_id + "' src=\"/Goomi/Download.template?type=img&id=" + jQuery("#dataGrid").getLocalRow(cl).picture_id + "\"/>" + jQuery("#dataGrid").getLocalRow(cl).picture_id; 
			jQuery("#dataGrid").jqGrid('setRowData',ids[i],{pic:img});
		}	// jQuery("#dataGrid").getLocalRow(ids[i]).picture_id 
	},
  	editurl: "/Goomi/Ajax.template?action=edit&table=" + tab,
      caption: "討論區"
    });  // jqGrid
 
    for(var i=0;i <= data.length;i++)
      jQuery("#talkDataGrid").jqGrid('addRowData',i+1,data[i]);
}

$(document).ready(function() {
	getTalk();

	$('#postBut').button().click(function (){
		<% if ( session.getAttribute("id") != null){ %>
		$('#postForm').each(function(){
	        this.reset();
		});
		$('#parent_id').val();
		$('#type').val("talk_main");
		$('#postDiv').show();
		<% } else { %>
		$( "#login-form" ).dialog( "open" );
		<% } %>
	});
	
	$('#submit').button().click(function (){
		$('#postForm').submit();
		$('#postDiv').hide();
		alert("張貼完成.");
		$('#d6').load("jsp/GoomiFamily/goomiFamily1.jsp");
	});
	
	$('#postDiv').hide();
});
</script>
<button id='postBut'>新主題</button>
<table width="100%"><tr><td width="10%">
	<table id="talkDataGrid"></table>
</td>
<td id=detail  valign="top" align="left" width=40% style='word-break:break-all'>

</td>
<td valign="top">
<div id=postDiv>
	<form id='postForm' target="portFrame" action="/Goomi/Ajax.template">
		<input type="hidden" id=action name=action value="edit" />
		<input type="hidden" id=table name=table value="`talk`" />
		<input type="hidden" id=oper name=oper value="add" />
		<input type="hidden" id=member_id name=member_id value="<%=session.getAttribute("id") %>" />
		<input type="hidden" id=id name=id value="_empty" />
		<input type="hidden" id=parent_id name=parent_id value="" />
		
		<input type="hidden" id="type" name="type" value="talk_main" />
		
		<br>主題:<input type="text" id="title" name="title" value="" size=50 maxlength="100"/>
		<br>內容:<br><textarea rows="10" cols="50" id=content name=content></textarea>
		
		<button id='submit'>送出</button>
	</form>
	
	 <iframe id="portFrame" frameborder="0"></iframe>
</div>
</td></tr></table>

</body>
</html>